<template>
  <div :class="[styles['card-type-tabs'], 'ato-flex-ai-center']">
    <DArrowLeft :class="[styles['arrow-icon'], 'ato-mr-6', {[styles['disabled']]: page < 2}]" v-if="totalPage > 1" @click="prev"/>
    <div :class="styles['tab-list']">
      <ul :style="{transform: `translateX(${position}px)`}">
        <li v-for="(card, index) in list" :key="card.id" :class="{[styles['active']]: index === modelValue}" ref="lisRef" @click="handleTab(index, card)">
          <span>{{ card.orderNo }}</span>
          <SuccessFilled :class="styles['success-icon']" v-if="check && card.reviewed"/>
        </li>
      </ul>
    </div>
    <DArrowRight :class="[styles['arrow-icon'], {[styles['disabled']]: page === totalPage}]" v-if="totalPage > 1" @click="next"/>
  </div>
</template>

<script setup name="CardTypeTabs">
import {computed, ref, watch} from 'vue'
import { DArrowRight, DArrowLeft, SuccessFilled } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  list: {
    type: Array,
    default: () => []
  },
  check: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

// li列表组件ref
const lisRef = ref(null)

// 当盒子的位置
const position = ref(0)
// 当前页
const page = ref(1)
// 页容量
const pageSize = 5
// 总页数
const totalPage = computed(() => Math.ceil(props.list.length / pageSize) )

// 上一页
const prev = () => {
  page.value --
}

// 下一页
const next = () => {
  page.value ++
}

// tab切换
const handleTab = (index, card) => {
  emit('update:modelValue', index)
  emit('change', card)
}

// 当当前tab变换到不在当前页内时，须切换页面
watch( () => props.modelValue, (val) => {
  for (let i = 0; i < totalPage.value; i++) {
    const min = i * pageSize
    const max = min + pageSize
    if(val >= min && val < max) {
      page.value = i + 1
    }
  }
})

watch(page, (val) => {
  const liWidth = lisRef.value[props.modelValue].offsetWidth + 6
  position.value = -liWidth * pageSize * (val - 1)
})

</script>

<style module="styles" lang="less" src="./index.less"></style>
